<template>
  <view class="">
    <view class="page-bg">
		<view class="logo-title">
			<u--image width="192rpx" height="192rpx" src="/static/logo.png"></u--image>
			<view class="font-1 font-bold mt-3">蓝领金福 1.1</view>
		</view>
		<view class="px-5">
			<u--form>
				<u-form-item>
					<u--input v-model="loginForm.phone"  placeholder="请输入手机号" border="none" :customStyle="inputStyle"></u--input>
				</u-form-item>
				<u-form-item class="">
					<u-input v-model="loginForm.code" placeholder="请输入验证码" border="none" :customStyle="inputStyle">
						<template slot="suffix">
							<view class="text-red" @click="startCode"> {{tips}} </view>
						</template>
					</u-input>
				</u-form-item>
				<bg-btn class="mt-5" @click="loginHandler">立即登录</bg-btn>
				<u-code :seconds="seconds" ref="uCode" @change="codeChange" @end="end" unique-key="page-login"></u-code>
			</u--form>
		</view>
	</view>
	<view class="footer">
		<u-checkbox-group v-model="checked">
			<u-checkbox name="checked" size="14" activeColor="#ee3636" labelSize="12px" labelColor='#666666' v-model="checked" shape="circle" label=""></u-checkbox>
		</u-checkbox-group>
		<view class="font-12 text-grey1">
			新手机号将自动注册，已阅读并同意 <text @click="handleUserAgrement">用户协议</text>和<text @click="handlePrivacy">隐私政策</text>
		</view>
	</view>
  </view>
</template>

<script>
  import { getCode, login } from '@/api/login'
  import {private_page, agreement} from "@/api/system/user.js"
  import { setToken } from '../utils/auth';
  export default {
	  mounted() {
	  	uni.hideTabBar()
	  },
    data() {
      return {
		seconds:60,
		tips:'获取验证码',
		inputStyle:{padding:'0rpx 20rpx'},
		checked:['checked'],
        globalConfig: getApp().globalData.config,
        loginForm: {
          phone: "",
          code: "",
        }
      }
    },

    methods: {
		end(){},
		startCode(text){
			if(this.$refs.uCode.canGetCode) {
				if(!uni.$u.test.mobile(this.loginForm.phone)){
					uni.$u.toast('请输入手机号');
					return false
				}
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				
				getCode(this.loginForm.phone).then(res=>{
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				})
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		codeChange(e){
			this.tips = e||"获取验证码"
		},
		loginHandler(){
			if(this.checked.length==0){
				uni.$u.toast('请同意用户协议和隐私政策');
				return false
			}
			if(!uni.$u.test.code(this.loginForm.code,6)){
				uni.$u.toast('请输入验证码');
				return false
			}
			if(!uni.$u.test.mobile(this.loginForm.phone)){
				uni.$u.toast('请输入手机号');
				return false
			}
			login(this.loginForm).then(res=>{
				setToken(res.data.token);
				uni.$emit("refresh-user",  true)
				uni.switchTab({
					url:"/pages/index"
				})
			})
		},
      // 隐私协议
      handlePrivacy() {
		
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/htmlview/htmlview?title=${site.title}&url=private`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/htmlview/htmlview?title=${site.title}&url=agree`)
      },
      
      // 登录方法
      async handleLogin() {
		  uni.switchTab({
		  	url:"/pages/index"
		  })
        // if (this.loginForm.username === "") {
        //   this.$modal.msgError("请输入您的账号")
        // } else if (this.loginForm.password === "") {
        // } else {
        //   this.$modal.loading("登录中，请耐心等待...")
        //   this.pwdLogin()
        // }
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        })
      },

      async getCode(){
        let res = await getCode(this.loginForm.username)
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('user/GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.page-bg {
  	height: 820rpx;
  	background-image: url('/static/images/ui/index/bg.png');
	background-repeat: no-repeat;
	background-position: 0rpx -240rpx;
}
.logo-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 138rpx 0;
}
::v-deep .u-form-item {
	padding-left:0px;
}
::v-deep .u-form-item__body {
	background-color: #F2F3F4;
	border-radius: 16rpx;
}
.footer {
	position: fixed;
	width: 100%;
	min-height: 160rpx;
	bottom: var(--window-bottom);
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer .hlink {
	
}
</style>
